<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./lib/kendo/css/kendo.common-material.min.css" />
    <link rel="stylesheet" href="./lib/kendo/css/kendo.material.min.css" />
    <link rel="stylesheet" href="./lib/kendo/css/kendo.material.mobile.min.css" />

    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>

    <div id="example">
        <div class="demo-section k-content wide">
            <div id="chart"></div>
        </div>
    </div>

    <div id="path-surface" style="width: 250px; height: 250px;"></div>

    <hr>

    <style>
        #clock-example .box,
        .demo-section {
            margin: 1em auto;
            padding: 2em;
        }

        #clock-surface-container {
            text-align: center;

            margin: 0 auto;
            width: 800px;
            height: 300px;
            padding: 20px;
        }
    </style>
    <div id="clock-example">
        <div class="box wide hidden-on-narrow">
            <div id="info" class="box-col"></div>
            <div class="box-col select-col">
                <h4>Surface type</h4>
                <ul id="select-type">
                    <li>SVG</li>
                    <li>Canvas</li>
                    <li>VML</li>
                </ul>
            </div>
        </div>
        <div id="clock-surface-container" class="hidden-on-narrow">
            <div id="clock-surface" style="width: 800px; height: 300px;"></div>
        </div>
        <div class="responsive-message"></div>
    </div>



    <script src="./lib/kendo/js/jquery.min.js"></script>
    <script src="./lib/kendo/js/kendo.all.min.js"></script>


    <script>
        var drawing = kendo.drawing;
        var geometry = kendo.geometry;
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Site Visitors Stats /thousands/"
                },
                legend: {
                    position: "bottom",
                    item: {
                        visual: createLegendItem
                    }
                },
                seriesDefaults: {
                    type: "column",
                    stack: true,
                    highlight: {
                        toggle: function (e) {
                            // Don't create a highlight overlay,
                            // we'll modify the existing visual instead
                            e.preventDefault();

                            var visual = e.visual;
                            var opacity = e.show ? 0.8 : 1;

                            visual.opacity(opacity);
                        }
                    },
                    visual: function (e) {

                        return createColumn(e.rect, e.options.color);
                    }
                },
                series: [{
                    name: "Total Visits",
                    data: [56000, 63000, 74000, 91000, 117000, 138000, 128000, 115000, 102000, 98000, 123000, 113000]
                }, {
                    name: "Unique visitors",
                    data: [52000, 34000, 23000, 48000, 67000, 83000, 40000, 50000, 64000, 72000, 75000, 81000]
                }],
                panes: [{
                    clip: false
                }],
                valueAxis: {
                    line: {
                        visible: false
                    }
                },
                categoryAxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    majorGridLines: {
                        visible: false
                    },
                    line: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true
                }
            });
        }

        function createColumn(rect, color) {
            //console.log(rect)
            var origin = rect.origin;
            var center = rect.center();
            var bottomRight = rect.bottomRight();
            var radiusX = rect.width() / 2;
            var radiusY = radiusX / 3;
            var gradient = new drawing.LinearGradient({
                stops: [{
                    offset: 0,
                    color: color
                }, {
                    offset: 0.5,
                    color: color,
                    opacity: 0.9
                }, {
                    offset: 0.5,
                    color: color,
                    opacity: 0.9
                }, {
                    offset: 1,
                    color: color
                }]
            });

            var path = new drawing.Path({
                fill: gradient,
                stroke: {
                    color: "none"
                }
            }).moveTo(origin.x, origin.y)
                .lineTo(origin.x, bottomRight.y)
                .arc(180, 0, radiusX, radiusY, true)
                .lineTo(bottomRight.x, origin.y)
                .arc(0, 180, radiusX, radiusY);

            var topArcGeometry = new geometry.Arc([center.x, origin.y], {
                startAngle: 0,
                endAngle: 360,
                radiusX: radiusX,
                radiusY: radiusY
            });

            var topArc = new drawing.Arc(topArcGeometry, {
                fill: {
                    color: color
                },
                stroke: {
                    color: "#ebebeb"
                }
            });
            var group = new drawing.Group();
            group.append(path, topArc);
            return group;
        }

        function createLegendItem(e) {
            var color = e.options.markers.background;
            var labelColor = e.options.labels.color;
            var rect = new geometry.Rect([0, 0], [120, 50]);
            var layout = new drawing.Layout(rect, {
                spacing: 5,
                alignItems: "center"
            });

            var overlay = drawing.Path.fromRect(rect, {
                fill: {
                    color: "#fff",
                    opacity: 0
                },
                stroke: {
                    color: "none"
                },
                cursor: "pointer"
            });

            var column = createColumn(new geometry.Rect([0, 0], [15, 10]), color);
            var label = new drawing.Text(e.series.name, [0, 0], {
                fill: {
                    color: labelColor
                }
            })

            layout.append(column, label);
            layout.reflow();

            var group = new drawing.Group().append(layout, overlay);

            return group;
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>


    <script>
        // var draw = kendo.drawing;
        // var geom = kendo.geometry;

        // var path = new draw.Path();

        // // The following commands are interchangeable
        // path.moveTo(100, 200);
        // path.moveTo([100, 200]);
        // path.moveTo(new geom.Point(100, 200));

        // path.lineTo(200, 200);

        // var surface = draw.Surface.create($("#surface"));
        // surface.draw(path);

        var draw = kendo.drawing;
        var geom = kendo.geometry;

        var path = new draw.Path()
            .moveTo(100, 200);

        // The following commands are interchangeable
        path.lineTo(200, 200);
        path.lineTo([200, 200]);
        path.lineTo(new geom.Point(200, 200));

        var surface = draw.Surface.create($("#path-surface"));
        surface.draw(path);


        var throttled = kendo.throttle(function () {
            console.log("hey! " + new Date());
        }, 100);

        // will log two times "hey":
        // (1) once for the first call
        // (2) once for the last call, roughly 100ms after the first one
        for (var i = 0; i < 10; i++) {
            throttled();
        }
    </script>



    <script>
        var dataviz = kendo.dataviz;
        var geom = kendo.geometry;
        var Point = geom.Point;
        var draw = kendo.drawing;
        var Circle = draw.Circle;
        var Group = draw.Group;
        var Path = draw.Path;
        var Text = draw.Text;

        var Clock = kendo.Class.extend({
            init: function (container, options) {
                this.options = $.extend({}, this.options, options);
                this._center = Point.create(this.options.center);
                this._render(container);
                this.set(new Date());
            },

            options: {
                center: [0, 0],
                size: 100,
                offset: 0,
                title: ""
            },

            set: function (date) {
                var center = this._center;

                var seconds = date.getMilliseconds() / 1000;
                seconds += date.getSeconds();
                seconds += date.getMinutes() * 60;
                seconds += (this.options.offset + date.getHours()) * 60 * 60;

                var angle = (360 / 60) * seconds;
                this._seconds.transform(geom.transform().rotate(angle, center));

                angle = (360 / (60 * 60)) * seconds;
                this._minutes.transform(geom.transform().rotate(angle, center));

                angle = (360 / (12 * 60 * 60)) * seconds;
                this._hours.transform(geom.transform().rotate(angle, center));
            },

            _render: function (container) {
                // Stacking order matches element order
                var root = new Group();
                root.append(
                    this._renderFrame(),
                    this._renderTicks(),
                    this._renderHands(),
                    this._renderLabels(),
                    this._renderTitle()
                );

                container.append(root);
            },

            _renderHands: function () {
                var center = this._center;
                this._seconds = new Path()
                    .stroke("red", 1)
                    .moveTo(center).lineTo(center.x, this._fromTop(0.05));

                this._minutes = new Path({
                    stroke: {
                        color: "black",
                        width: 3,
                        lineCap: "round",
                        opacity: 0.6
                    }
                }).moveTo(center).lineTo(center.x, this._fromTop(0.04));

                this._hours = new Path({
                    stroke: {
                        color: "black",
                        width: 6,
                        lineCap: "round",
                        opacity: 0.6
                    }
                }).moveTo(center).lineTo(center.x, this._fromTop(0.25));

                var hands = new Group();
                hands.append(this._seconds, this._minutes, this._hours);

                return hands;
            },

            _renderTicks: function () {
                var center = this._center;
                var ticks = new Group();

                for (var i = 0; i < 360; i += 30) {
                    var p1 = new Point(center.x, this._fromTop(0.03)).rotate(i, center);
                    var p2 = new Point(center.x, this._fromTop(0.055)).rotate(i, center);
                    ticks.append(new Path({
                        stroke: {
                            color: "#333",
                            width: 1
                        }
                    }).moveTo(p1).lineTo(p2));
                }

                return ticks;
            },

            _renderLabels: function () {
                var center = this._center;
                var labels = new Group();
                var font = "bold " + this.options.size * 0.08 + "px arial, helvetica, sans-serif";

                var hours = 12;
                for (var i = 0; i < 360; i += 90) {
                    var pos = new Point(center.x, this._fromTop(0.12)).rotate(i, center);
                    var text = new Text(hours, pos, {
                        font: font,
                        fill: {
                            color: "#333"
                        }
                    });

                    this._centerText(text);

                    hours = (hours + 3) % 12;
                    labels.append(text);
                }

                return labels;
            },

            _renderFrame: function () {
                var frame = new Group();
                var size = this.options.size;

                var outerCircle = new geom.Circle(this._center, (size / 2) - 4);
                var innerCircle = new geom.Circle(this._center, size * 0.01);

                frame.append(
                    new Circle(outerCircle, {
                        stroke: {
                            color: "#333",
                            width: 1
                        }
                    }),
                    new Circle(innerCircle).fill("black")
                );

                return frame;
            },

            _renderTitle: function () {
                var group = new Group();
                var title = this.options.title;

                if (title) {
                    var pos = [this._center.x, this._fromTop(-0.1)];
                    var text = new Text(title, pos, {
                        font: "bold 16px arial",
                        fill: {
                            color: "#333"
                        }
                    });

                    this._centerText(text);
                    group.append(text);
                }

                return group;
            },

            _centerText: function (text) {
                var bbox = text.bbox();
                text.position().translate(-bbox.width() / 2, -bbox.height() / 2);
            },

            _fromTop: function (ratio) {
                var size = this.options.size;
                var top = this._center.y - size / 2;
                return top + size * ratio;
            }
        });

        function initSurface(type) {
            return draw.Surface.create($("#clock-surface"), { type: type });
        }

        function initClocks(container) {
            var now = new Date();

            var local = new Clock(container, {
                center: [150, 150],
                size: 300
            });

            var officeA = new Clock(container, {
                center: [425, 200],
                size: 200,
                offset: -3,
                title: "Office A"
            });

            var officeB = new Clock(container, {
                center: [650, 200],
                size: 200,
                offset: 3,
                title: "Office B"
            });

            return [local, officeA, officeB];
        }

        $(document).ready(function () {
            var surface = initSurface();

            var root = new Group();
            var clocks = initClocks(root);

            surface.draw(root);

            function loop() {
                for (var i = 0; i < clocks.length; i++) {
                    clocks[i].set(new Date())
                }

                kendo.animationFrame(loop);
            }

            loop();

            $("#select-type li").each(function () {
                var type = $(this).text().toLowerCase();
                if (!kendo.support[type]) {
                    $(this).addClass("km-state-disabled");
                }
            });

            $("#select-type").kendoMobileButtonGroup({
                select: function (e) {
                    var option = $("li", e.sender.element).eq(e.index);
                    var type = option.text().toLowerCase();

                    surface.destroy();
                    surface = initSurface(type);
                    surface.draw(root);
                },
                index: $("#select-type li:not(.km-state-disabled)").index()
            });
        });
    </script>
</body>

</html>